/*
 * @Author: lin.zehong
 * @Date: 2019-07-22 10:20:59
 * @Last Modified by: lin.zehong
 * @Last Modified time: 2019-07-22 10:21:36
 * @Desc: 标签列表 和 我的标签 详情
 */
import React, { Component } from "react";
import { Icon } from "antd";
import { connect } from "dva";
import { ROLE_TYPE_SUPER } from "../../labelManager/constants";
import styles from "./BaseInfo.less";

const mapStateToProps = ({ labelManager, user = {} }) => ({
  detail: labelManager.labelDetailInfo,
  userInfo: user.userInfo,
});

const mapDispatchToProps = dispatch => ({
  getDetail(params) {
    return dispatch({
      type: "labelManager/getDetail",
      payload: params
    });
  },
});

@connect(mapStateToProps, mapDispatchToProps)
class BaseInfo extends Component {
  componentDidMount() {
    this.init();
  }

  init = () => {
    const { labelId, getDetail } = this.props;
    getDetail({labelId});
  }

  handleData = (data = []) => {
    let res = '-';
    if (data.length) {
      res = data.map(item => item.name).join(', ');
    }
    return res;
  }

  onClose = () => {
    const { history, roleType } = this.props;
    if (roleType === ROLE_TYPE_SUPER) {
      history.push("/messageCenter/channelManager/labelManager");
    } else {
      history.push("/messageCenter/channelManager/myLabelManager");
    }
  }

  render() {
    const { detail, roleType } = this.props;
    const { labelName, owner = [], octwnerDeptName, labelDescription, useObject = []} = detail;
    const ownerName = this.handleData(owner);
    const useObjectName = this.handleData(useObject);
    return (
      <div className={styles.root}>
        <div className={styles.basicInfo}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span className={styles.title}>基本信息</span>
            <Icon
              type="close"
              style={{ color: "rgba(0,0,0,0.45)", fontSize: 16 }}
              onClick={this.onClose}
            />
          </div>
          <div className={styles.line}>
            <div className={styles.onePiece}>
              标签名称：
              <span className={styles.content}>
                {labelName || "-"}
              </span>
            </div>
            <div className={styles.onePiece}>
              管理员：
              <span className={styles.content}>
                {ownerName || `-`}
              </span>
            </div>
          </div>
          <div className={styles.line}>
            <div className={styles.onePiece}>
              管理部门：
              <span className={styles.content}>
                {octwnerDeptName || "-"}
              </span>
            </div>
          </div>
          <div className={styles.description}>
            <div className={styles.desc}>标签描述：</div>
            <div
              className={styles.content}
              style={{ width: "calc(50% - 120px)" }}
            >
              {labelDescription || "-"}
            </div>
          </div>
        </div>
        {
          roleType === ROLE_TYPE_SUPER ?
            <div className={styles.basicInfo}>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className={styles.title}>标签授权</span>
              </div>
              <div className={styles.line}>
                <div className={styles.onePiece}>
                  使用对象：
                  <span className={styles.content}>
                    {useObjectName || "-"}
                  </span>
                </div>
              </div>
            </div>
            : null
        }
      </div>
    );
  }
}

export default BaseInfo;
